<template>
  <a-button @click="count++">{{ count }}</a-button>
  <div>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const count = ref(0)
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌1',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ]
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  const pagination = {
    size: 'large',
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizeOptions: ['10', '20', '30'], //可选的页面显示条数
    showTotal: (total, range) => {
      return range[0] + '-' + range[1] + ' 共' + total + '条'
    }, //展示每页第几条至第几条和总数
    hideOnSinglePage: false, // 只有一页时是否隐藏分页器
    showQuickJumper: true, //是否可以快速跳转至某页
    showSizeChanger: true, //是否可以改变pageSize
  }
</script>
